<!--
 * @Author: lihaogn
 * @Date: 2021-12-07 21:08:17
 * @LastEditTime: 2021-12-18 21:50:06
 * @LastEditor: lihaogn
 * @Description: 导入 excel 对话框
 * @FilePath: \lix-admin-vue2\src\components\common\lix-import\ImportExcelDialog.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogVisible"
    width="420px"
    v-loading="dialogLoading"
    @close="handleDialogCancel"
  >
    <div class="upload-container">
      <el-upload
        drag
        action=""
        accept=".xlsx, .xls"
        v-loading="okButtonLoading"
        :multiple="false"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div style="color:#F56C6C;margin-top:12px;" slot="tip">
          注意：只能上传 excel 文件
          <div>
            <el-button type="text" @click="downloadTemplate"
              >导入用户模板下载</el-button
            >
          </div>
        </div>
      </el-upload>
    </div>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import XLSX from 'xlsx'
import { getHeaderRow, USER_RELATIONS } from './utils'
import { dialogMixin } from '../../../mixins/dialog'
import { reqImportUsers } from '../../../api/user-manage/user/api'

export default {
  mixins: [dialogMixin],

  methods: {
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 10:10:57
     * @description: 对话框取消（关闭）事件
     * @param {*}
     * @return {*}
     */
    handleDialogCancel() {
      this.okButtonLoading = false
      this.$emit('update:visible', false)
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 10:24:33
     * @description: 将解析后的 excel body 数据的 key 从中文换成英文
     * @param {*} bodyData - 解析后的 excel body 数据对象
     * @return {*}
     */
    parseExcelbodyData(bodyData) {
      const arr = []
      bodyData.forEach(item => {
        const obj = {}
        Object.keys(item).forEach(key => {
          obj[USER_RELATIONS[key]] = item[key]
        })
        arr.push(obj)
      })
      return arr
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 10:11:07
     * @description: 上传 excel 数据
     * @param {*} excelData:{header,body} - excel 解析后的数据
     * @return {*}
     */
    async uploadExcelFile(excelData) {
      const uploadData = this.parseExcelbodyData(excelData.body)
      const res = await reqImportUsers(uploadData)
      if (res.success) {
        this.$message.success(res.message)
        this.dialogVisible = false
        this.$emit('ok')
      } else {
        this.okButtonLoading = false
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 10:16:11
     * @description: 解析 excel 文件
     * @param {*} rawFile - 原始的 excel 文件
     * @return {*}
     */
    parseFile(rawFile) {
      this.okButtonLoading = true
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        // 读取完成事件
        reader.onload = e => {
          // 1 获取解析到的数据
          const data = e.target.result
          // 2 用 xlsx 对数据进行解析
          const workbook = XLSX.read(data, { type: 'array' })
          // 3 获取第一张工作簿（sheet1）名称
          const sheet1Name = workbook.SheetNames[0]
          // 4 读取 sheet1 的数据
          const worksheet = workbook.Sheets[sheet1Name]
          // 5 解析数据表头
          const header = getHeaderRow(worksheet)
          // 6 解析数据体
          const results = XLSX.utils.sheet_to_json(worksheet)
          // 7 传入解析后的数据
          this.uploadExcelFile({ header, body: results })
          // 8 loading 处理
          // this.okButtonLoading = false
          // 9 异步完成
          resolve()
        }
        // 启动读取指定的 blob 或 file 内容
        reader.readAsArrayBuffer(rawFile)
      })
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-08 10:12:12
     * @description: 自动上传前的操作
     * @param {*} file - 选择的文件
     * @return {*} false - 不执行自动上传操作
     */
    handleBeforeUpload(file) {
      if (!file) return false
      this.parseFile(file)
      return false
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-09 11:32:15
     * @description: 下载模板文件
     * @param {*}
     * @return {*}
     */
    async downloadTemplate() {
      this.dialogLoading = true
      const templateHeader = ['用户名', '真实姓名', '手机号码', '邮箱']
      const templateData = [['xxx', 'xxx', 'xxx', 'xxx']]
      const excel = await import('../lix-export/Export2Excel')
      excel.export_json_to_excel({
        // excel 表头
        header: templateHeader,
        // excel 数据（二维数组结构）
        data: templateData,
        // 文件名称
        filename: '用户导入模板',
        // 是否自动列宽
        autoWidth: true,
        // 文件类型
        bookType: 'xlsx'
      })
      this.dialogLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
.upload-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
